<template>
    <div class="tax-container">
        <div class="tax-header">
            <div class="using" @click="toTax()">马上诊断</div>
        </div>

        <div class="environment-container">
            <my-title title="互联网 + 税务服务生态体系"></my-title>

            <div class="environment-body" v-for="(item, key) in environmentData">
                <div class="environment-icon-body">
                    <div class="environment-icon" :class="`environment-icon-${key + 1}`"></div>
                </div>
                <div class="environment-content">
                    <div class="title">{{item.title}}</div>
                    <p v-for="content in item.content">{{content}}</p>
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>

        <div class="solution-container">
            <my-title title="专注行业解决方案"></my-title>

            <div class="solution-body" :class="`solution-body-bg-${key + 1}`" v-for="(item, key) in solutionData">
                <div class="solution-header">
                    <div class="solution-icon" :class="`solution-icon-${key + 1}`"></div>
                    <div class="solution-title">{{item.title}}</div>
                    <div class="using" @click="toContact(`${item.title}咨询`)">了解更多</div>
                </div>
                <div class="solution-content">
                    <div class="middle-inner">
                        <p>{{item.content}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
	import myTitle from '../components/title'

    export default {
	    create() {
		    document.body.scrollTop = 0
	    },
	    components: {
		    myTitle
	    },
        data() {
	    	return {
			    environmentData: [{
			    	title: '云测算系统',
                    content: ['简单操作企业税筹现状', '输出清晰优化方案', '全国政策实时更新', '企业税费保全面优化']
                },{
				    title: '财税中心',
				    content: ['全国多个政策地财务中心', '最好的政策福利资源', '最适合企业行业的贴心推荐', '稳定高效可信']
			    },{
				    title: '专家团队',
				    content: ['多年人力资源服务团队', '来自四大行的法财税专家', '1V1专业顾问服务']
			    }],
                solutionData: [{
			    	title: '直播平台解决方案',
                    content: '适用于通过商家广告及用户充值打赏来获得盈利，并以打赏分成、签约费的方式向主播支付酬劳的平台。将主播收益合理化的同时解决直播平台涉税风险'
                },{
	                title: '物流平台解决方案',
	                content: '适用于没法向司机索要增值税发票的物流平台。将运输业务项目外包，让外包方给司机发放报酬，将司机收益合理化的同时解决物流公司增值税抵扣链条断裂问题'
                },{
	                title: '医疗平台解决方案',
	                content: '适用于人力成本较高的私人医院。对公司的人力资源成本进行合理筹划，适当降低人力资源成本，同时适当降低高收入群体的个人所得税。'
                }]
            }
        },
        methods: {
            toContact(typeName) {
                let ls = window.localStorage
	            ls.setItem('pageTitle', '行业方案咨询')
                ls.setItem('typeName', typeName)
	            ls.setItem('type', 2)
                ls.setItem('ifCompany', 1)

	            document.body.scrollTop = 0
	            this.$router.push('contact')
            },
            toTax() {
            	window.location.href = 'https://zcyq.aiyuangong.com/?utm_source=mguanwang&utm_medium=mszd'
            }
        }
    }
</script>

<style lang="scss">
    @import "../style/function";
    @import "../style/color";

    .tax-header {
        background-image: url("../images/tax/tax-banner.png");
        width: pxToRem(750);
        height: pxToRem(510);
        background-size: 100% 100%;
        position: relative;
        text-align: center;

        .using {
            width: pxToRem(210);
            height: pxToRem(64);
            line-height: pxToRem(70);
            position: absolute;
            left: pxToRem(100);
            bottom: pxToRem(100);
            border-radius: pxToRem(64);
            border: $red solid 1px;
            color: $red;
            font-size: pxToRem(28);
        }
    }

    .environment-container {
        /*height: pxToRem(865);*/
        background-color: $white;

        .environment-body {
            position: relative;
            /*overflow: auto;
            zoom: 1;*/
            margin-bottom: pxToRem(60);

            .environment-icon-body {
                float: left;
                width: pxToRem(168);
                height: pxToRem(168);
                margin: 0 pxToRem(50) 0 pxToRem(100);

                .environment-icon {
                    width: pxToRem(168);
                    height: pxToRem(168);
                    position: absolute;
                    background-size: 100% 100%;
                    top: 50%;
                    margin-top: pxToRem(-84);
                }

                @for $i from 1 through 3 {
                    .environment-icon-#{$i} {
                        background-image: url('../images/tax/environment-icon-' + $i + '.png');
                    }
                }
            }

            .environment-content {
                float: left;

                .title {
                    font-size: pxToRem(32);
                    color: $dark-grey;
                    font-weight: bold;
                    margin-bottom: pxToRem(16);
                }

                p {
                    font-size: pxToRem(28);
                    color: $grey;
                    line-height: pxToRem(36);
                    font-style: italic;
                }
            }
        }
    }

    .solution-container {
        height: pxToRem(1500);
        background-color: $lighter-grey;

        .solution-body {
            width: pxToRem(688);
            height: pxToRem(409);
            margin: 0 auto pxToRem(28);
            background-size: 100% 100%;

            .solution-header {
                height: pxToRem(104);

                .solution-icon {
                    width: pxToRem(36);
                    height: pxToRem(36);
                    background-size: 100% 100%;
                    margin: pxToRem(34) pxToRem(14) 0 pxToRem(30);
                    float: left;
                }

                .solution-title {
                    float: left;
                    color: $dark-grey;
                    font-size: pxToRem(30);
                    line-height: pxToRem(110);
                    font-weight: bold;
                }

                .using {
                    width: pxToRem(160);
                    height: pxToRem(54);
                    line-height: pxToRem(60);
                    float: right;
                    border: $red solid 1px;
                    margin: pxToRem(25) pxToRem(30);
                    color: $red;
                    font-size: pxToRem(26);
                    border-radius: pxToRem(27);
                    text-align: center;
                }
            }

            .solution-content {
                display: table;
                font-size: pxToRem(30);
                color: $white;
                height: pxToRem(300);
                width: pxToRem(675);
                margin: auto;

                .middle-inner {
                    display: table-cell;
                    vertical-align: middle;

                    p {
                        padding: 0 pxToRem(36);
                    }
                }
            }

        }

        @for $i from 1 through 3 {
            .solution-body-bg-#{$i} {
                background-image: url('../images/tax/solution-bg-' + $i + '.png');
            }

            .solution-icon-#{$i} {
                background-image: url('../images/tax/solution-icon-' + $i + '.png');;
            }
        }


    }

</style>
















